<%--
    Copyright 2010 mazhao.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    under the License.

    Document   : login
    Created on : 2010/09/19, 21:38:01
    Author     : mazhao
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title><s:text name="shopping.title"/> - <s:text name="login_create.title"/></title>

    <link type="text/css" href="<%=request.getContextPath()%>/stylesheet/smoothness/jquery-ui-1.8.6.custom.css"
          rel="stylesheet"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery-ui-1.8.6.custom.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.cookie.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/script/jquery.validate.js"></script>
    <script type="text/javascript">
        // create tabs
        $(document).ready(function() {
            var ops = { };
            // if register then set selected options.
            var dis = '<%= request.getParameter("type") %>';
            var attr = '<%= request.getAttribute("type") %>';
            if (dis == 'register' || attr == 'register') {
                ops = { selected: 1 }
            }

            $("#tabDiv").tabs(ops);

            // add validation to form
            $("#loginForm").validate();
            $("#createForm").validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 6
                    },
                    password:{
                        required: true,
                        minlength: 6
                    },
                    rePassword:{
                        required: true,
                        minlength: 6
                    },
                    postCode:{
                        required: true,
                        digits: true,
                        minlength: 6,
                        maxlength: 6
                    },
                    address:{
                        required: true
                    },
                    name:{
                        required: true
                    },
                    phone:{
                        required: true
                    },
                    cellPhone:{
                        required: true
                    },
                    email:{
                        required: true,
                        email: true
                    }
                }
            });
        });
    </script>
    <style type="text/css">
        form label.error {
            background: white;
            border:none;
            font:normal;
        }

    </style>
    <title><s:text name="login.html.title"/></title>
</head>
<body>
<h1 class="alt"><s:text name="login.html.title"/></h1>

<div id="tabDiv">
    <ul>
        <li><a href="#logindiv"><s:text name="login.login"/></a></li>
        <li><a href="#creatediv"><s:text name="login.create"/></a></li>
    </ul>
    <div id="logindiv">
        <s:text name="login.title"/>
        <s:actionerror/>
        <s:form id="loginForm" action="enter" namespace="/front" method="post">
            <s:textfield cssClass="text required" name="username" key="login.username" required="true"/>
            <s:password cssClass="text required" name="password" key="login.password"/>
            <!-- security jcaptcha.jpg -->
            <tr>
                <td>
                    <img src="<%= request.getContextPath()%>/jcaptcha.jpg" width="150px" height="100px"/>
                </td>
                <td><input class="text required" type="text" name="jcaptcha" value=""/></td>
            </tr>

            <s:submit cssClass="button positive" key="login.submit"/>
        </s:form>
    </div>
    <div id="creatediv">
        <s:text name="create.title"/>
        <s:actionerror/>
        <s:form id="createForm" action="create" namespace="/front" method="post">
            <s:textfield cssClass="text" id="cusername" name="username" key="create.username"/>
            <s:password cssClass="text"  id="dpassword" name="password" key="create.password"/>
            <s:password cssClass="text"  id="crePassword" name="rePassword" key="create.re_password"/>

            <s:doubleselect
                label="Province"  key="create.province_city"
                list="provinces"    listKey="id"      listValue="name"
                doubleList="cities" doubleListKey="id" doubleListValue="name"
                name="province" doubleName="city"/>

            <s:textfield cssClass="text" name="postCode" key="create.post_code"/>
            <s:textfield cssClass="text" name="address" key="create.address"/>
            <s:textfield cssClass="text" name="name" key="create.name"/>
            <s:textfield cssClass="text" name="phone" key="create.phone"/>
            <s:textfield cssClass="text" name="cellPhone" key="create.cell_phone"/>
            <s:textfield cssClass="text" name="email" key="create.email"/>
            <s:hidden name="operationType" value="register"/>
            <s:submit key="create.submit"/>
        </s:form>
    </div>
</div>

</body>
</html>
